﻿
//#region 左侧菜单
let carouselMenuList = document.getElementsByClassName('carousel-menu')
let detailTypes = document.getElementsByClassName('detailType-div')

// 给所有二级子菜单添加悬浮与离开效果
for (let i = 0; i < detailTypes.length; i++) {
    let dt = detailTypes[i]
    dt.addEventListener('mouseenter', () => {
        setBorderRight()
        dt.style.zIndex = 1;
        carouselMenuList[i].style.border = "1px solid #ff5f00"
        carouselMenuList[i].style.borderRight = "0"
    });
    dt.addEventListener('mouseleave', () => {
        dt.style.zIndex = -1;
        carouselMenuList[i].style.border = '0'
        clearBorderRight()
    });
}

// 给所有一级菜单添加悬浮与离开效果
for (let i = 0; i < carouselMenuList.length; i++) {
    let menu = carouselMenuList[i]
    menu.addEventListener('mouseenter', () => {
        let detailType = document.getElementsByClassName('detailType-div')[i]
        detailType.style.zIndex = 1;
        setBorderRight()
        menu.style.borderRight = "0"
    });
    menu.addEventListener('mouseleave', () => {
        let detailType = document.getElementsByClassName('detailType-div')[i]
        detailType.style.zIndex = -1;
        menu.style.border = '0'
        clearBorderRight()
    });
}

// 设置所有一级菜单的右边框
function setBorderRight() {
    for (let i = 0; i < carouselMenuList.length; i++) {
        let menu = carouselMenuList[i]
        menu.style.borderRight = "1px solid #ff5f00"
    }
}
// 清除所有一级菜单的右边框
function clearBorderRight() {
    for (let i = 0; i < carouselMenuList.length; i++) {
        let menu = carouselMenuList[i]
        menu.style.borderRight = "0"
    }
}
//#endregion


//#region 轮播图
let imgNum = 0    //用于控制轮播的图片，imgNum=0代表第一个轮播图
// 让图片宽高与容器宽高相同
let carouselCenterDiv = document.getElementsByClassName('carousel-center')[0]
let imageList = document.getElementsByClassName('carouselImage')
for (let i = 0; i < imageList.length; i++) {
    let img = imageList[i]
    img.style.width = carouselCenterDiv.clientWidth + 'px'      //与容器等宽
    img.style.height = carouselCenterDiv.clientHeight + 'px'    //与容器登高
}

//初始化轮播圆点
let dotFarent = document.getElementsByClassName('carouselDot-div')[0]
for (let i = 0; i < imageList.length; i++) {    //有多少轮播图就有多少轮播圆点
    let span = document.createElement("span")
    span.style.backgroundImage = "url('../../../image/index/小圆点未选中.png')"
    if (i == 0) span.style.backgroundImage = "url('../../../image/index/小圆点选中.png')"
    dotFarent.appendChild(span)
}


//轮播切换
setInterval(carouselRun, 4000)
function carouselRun() {
    let carouselImageListDiv = document.getElementsByClassName('carouselImageList-div')[0]
    imgNum = imgNum + 1
    if (imgNum >= imageList.length) {
        imgNum = 0
    }
    carouselImageListDiv.style.left = -imgNum * carouselCenterDiv.clientWidth + 'px'
    setCarouselDot(imgNum)
}

// 设置轮播小圆点
function setCarouselDot(index) {
    let dotList = document.getElementsByClassName('carouselDot-div')[0].children
    for (let i = 0; i < dotList.length; i++) {
        let dot = dotList[i]
        dot.style.backgroundImage = "url('../../../image/index/小圆点未选中.png')"      //清空所有
    }
    dotList[index].style.backgroundImage = "url('../../../image/index/小圆点选中.png')" //设置当前
}

//轮播左移
function CarouselLeftMove() {
    imgNum = imgNum - 2;
    if (imgNum < 0) {
        imgNum = -1
    }
    console.log("hhh")
    carouselRun()
}

//轮播右移
function CarouselRightMove() {
    if (imgNum < 0) {
        imgNum = 0
    }
    console.log("hhh")
    carouselRun()
    console.log("hhhhh")
}
//#endregion
